<script setup lang="ts">
import type { ImageModel } from '@/apis/model/images'
import { Message } from '@arco-design/web-vue'
import {
  deleteManageImageByIdApi,
  getManageImagesListApi,
  updateManageImageVisibilityByIdApi,
} from '@/apis/modules/images'
import { E_IMAGE_VISIBILITY } from '@/enums/resource'
import { ModalHelper } from '@/utils/modal.helper'
import useConfig from './useConfig'

const { columns } = useConfig()
const queryParams = ref({
  region_id: '',
  visibility: '',
  image_type: '',
  image_name: '',
})
const {
  data: tableData,
  loading,
  run,
} = useListRequest(getManageImagesListApi, {
  immediate: true,
  params: queryParams,
})
const { tableRef } = useTable(run, tableData)

async function handleDelete(record: ImageModel) {
  return new Promise((resolve, reject) => {
    ModalHelper.error(
      {
        title: '删除镜像',
        content: '确定要删除镜像吗？镜像删除后不可恢复。',
        okText: '删除',
        width: 480,
        closable: false,
        onCancel: reject,
      },
      async () => {
        return deleteManageImageByIdApi({
          region_id: record.region_id!,
          image_id: record.id!,
        }).then(() => {
          Message.success('删除成功')
          run()
          resolve(true)
        })
      },
    )
  })
}

// 修改状态
async function handleToggleStatus(
  record: ImageModel,
  visibility: string,
): Promise<boolean> {
  async function handle() {
    return updateManageImageVisibilityByIdApi({
      region_id: record.region_id!,
      image_id: record.id!,
      visibility,
    }).then(() => {
      run()
      Message.success('操作成功')
    })
  }
  // 修改为可见
  if (visibility === E_IMAGE_VISIBILITY.PUBLIC) {
    handle()
    return true
  }
  // 修改为不可见, 二次确认
  return new Promise((resolve, reject) => {
    ModalHelper.error(
      {
        title: '禁用镜像 ',
        content: '确定将镜像设置为不可见吗？',
        maskClosable: false,
        onCancel: reject,
      },
      async () => {
        await handle()
        resolve(true)
      },
    )
  })
}
const { allRegionOptions } = useRegions()
</script>

<template>
  <main-container
    :loading="loading"
    :show-pagination="false"
    @run="run"
  >
    <template #header>
      <a-select
        v-model="queryParams.region_id"
        placeholder="请选择区域"
        :options="[{ label: '全部区域', value: '' }, ...allRegionOptions]"
        class="!w-34"
        @change="() => run()"
      />
      <a-select
        v-model="queryParams.image_type"
        placeholder="请选择类型"
        :options="instanceTypeOptions"
        class="!w-34"
        @change="() => run()"
      />
      <a-select
        v-model="queryParams.visibility"
        placeholder="请选择可见性"
        :options="imageVisibilityOptions"
        class="!w-34"
        @change="() => run()"
      />
      <a-input-search
        v-model="queryParams.image_name"
        placeholder="请输入镜像名称搜索"
        class="!w-58"
        @change="() => run()"
      />
    </template>
    <a-table
      ref="tableRef"
      v-bind="commonTableProps"
      :columns="columns"
      :data="tableData"
    >
      <template #visibility="{ record }">
        <a-switch
          size="small"
          :checked-value="E_IMAGE_VISIBILITY.PUBLIC"
          :unchecked-value="E_IMAGE_VISIBILITY.PRIVATE"
          :before-change="val => handleToggleStatus(record, val as string)"
          :model-value="record.visibility"
        />
      </template>
      <template #actions="{ record }">
        <a-link
          status="danger"
          @click="handleDelete(record)"
        >
          <i-icons-delete />
        </a-link>
      </template>
    </a-table>
  </main-container>
</template>

<style scoped></style>
